<template>
  <div style="height: 100%; width: 100%">
    <div style="height: 10vh; background-color: white">
      <el-button
        style="float: right"
        type="danger"
        size="small"
        @click="batchDelete"
        :disable="ids.length > 0 ? false : true"
        >批量删除</el-button
      >

      <el-table
        ref="multipleTable"
        :data="comments"
        tooltip-effect="dark"
        style="height: 60vh"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="number" label="编号" width="120">
        </el-table-column>
        <el-table-column prop="nickname" label="作者编号" width="120">
        </el-table-column>
        <el-table-column
          prop="articleTitle"
          label="书籍名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="content" label="评论内容" show-overflow-tooltip>
        </el-table-column>
        <el-table-column button=""> </el-table-column>

        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="deleteContent(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="child3">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<style>
.child3 {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
<script>
export default {
  data() {
    return {
      comments: [
        {
          number: "1999999999",
          nickname: "张三",
          articleTitle: "完美世界",
          createTime: "2020-12-12",
          content: "赞！",
        },
        {
          number: "1999999999",
          nickname: "张三",
          articleTitle: "完美世界",
          createTime: "2020-12-12",
          content: "赞！",
        },
        {
          number: "1999999999",
          nickname: "张三",
          articleTitle: "完美世界",
          createTime: "2020-12-12",
          content: "赞！",
        },
      ],
      ids: [],
      currentIndex: "1",
      currentPage: "",
    };
  },

  methods: {
    deleteContent(i) {
      if (confirm("您确认删除此内容吗?")) {
        this.comments.splice(i, 1);
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      console.log(val);
      //赋值以前先清空
      this.ids = [];
      val.forEach((item) => {
        this.ids.push(item.id);
      });
    },
    batchDelete() {
      this.$confirm("此操作将永久删除是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          this.$refs.multipleTable.clearSelection();
        });
    },
  },
};
</script>
